<!DOCTYPE html>
<html>
  <head>
    <title>WorldWide Telescope — Web Client</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="ROBOTS" content="INDEX, FOLLOW">

    <meta property="og:site_name" content="WorldWide Telescope" />
    <meta property="og:url" content="https://worldwidetelescope.org/" />
    <meta property="og:title" content="WorldWide Telescope" />
    <meta property="og:type" content="website" />
    <meta property="og:description" content="Worldwide Telescope is a tool for showcasing astronomical data and knowledge." />
    <meta property="og:image" content="<%= webclient_static_assets_url_prefix %>images/wwtlogo.png" />
    <meta property="og:image:width" content="256" />
    <meta property="og:image:height" content="256" />
    <meta name="title" content="WorldWide Telescope" />
    <meta name="description" content="Worldwide Telescope is a tool for showcasing astronomical data and knowledge." />

    <link rel="icon" href="favicon.ico"/>

    <link href="<%= webclient_static_assets_url_prefix %>css/webclient<%= maybe_min %>.css?v=<%= shortSHA %>" rel="stylesheet" />
    <link href="<%= webclient_static_assets_url_prefix %>css/angular-motion.css?v=<%= shortSHA %>" rel="stylesheet" />
    <link href="<%= webclient_static_assets_url_prefix %>css/introjs.css?v=<%= shortSHA %>" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jScrollPane/2.0.23/style/jquery.jscrollpane.css" rel="stylesheet"/>
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-YWNE29K5CB"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() { dataLayer.push(arguments); }
      gtag('js', new Date());
      gtag('config', 'G-YWNE29K5CB');
    </script>

    <style>
      body .finder-scope {
        background: url(<%= webclient_static_assets_url_prefix %>images/finder-scope.png?v=<%= shortSHA %>) no-repeat;
      }
    </style>

    <script src="//code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pako/1.0.3/pako_inflate.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/uuid/8.3.2/uuid.min.js"></script>
    <script src="<%= webgl_engine_url_prefix %>/wwtsdk<%= maybe_min %>.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-touch.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-route.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-cookies.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-animate.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.3.8/angular-strap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.3.8/angular-strap.tpl.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jScrollPane/2.0.23/script/jquery.jscrollpane.js"></script>
    <script src="<%= webclient_static_assets_url_prefix %>wwtwebclient<%= maybe_min %>.js?v=<%= shortSHA %>"></script>
  </head>

  <!-- note: the "desktop" class of <body> may be modified by JS -->

  <body
    class="fs-player wwt-webclient-wrapper desktop"
    data-ng-app="wwtApp"
    data-res-location=""
    data-version="1"
    data-res-version="<%= shortSHA %>"
    data-standalone-mode="true">

    <div
      data-ng-controller="MainController"
      ng-cloak
      ng-init="initUI()"
      ng-class="is_mobile ? 'mobile' : 'desktop'">

      <div id="WorldWideTelescopeControlHost">
        <div id="WWTCanvas" ng-context-menu="showFinderScope"></div>
      </div>

      <!-- Various modal UI elements -->

      <div id="contextmenu" class="contextmenu"></div>

      <div id="popoutmenu" class="contextmenu"></div>

      <div id="histogram" class="histogram">
        <div class="header">
          <div id="histogramClose">
            <a><i class="fa fa-close"></i></a>
          </div>
          <span localize="Histogram"></span>
        </div>

        <div style="margin: 0px;">
          <canvas id="graph" src="" width="256" height="150" style="margin: 0px;" />
        </div>

        <div class="select">
          <select id="ScaleTypePicker" >
            <option localize="Linear"></option>
            <option localize="Log"></option>
            <option localize="Power"></option>
            <option localize="Square Root"></option>
            <option localize="Histogram Equalization"></option>
          </select>
        </div>
      </div>

      <div class="modal wwt-modal simpleinput" id="simplemodal" tabindex="-1" role="dialog">
        <div class="modal-dialog" id="simpleinput">
          <div class="modal-content">
            <div class="modal-header">
              <i class="fa fa-close pull-right" id="simpleinputcancel"></i>
              <h5 id="simpletitle"></h5>
            </div>

            <div class="modal-body">
              <div id="inputlabel" localize="Enter Text"></div>
              <input type="text" id="inputtext" />
            </div>

            <div class="modal-footer">
              <a class="btn" id="simpleinputok" localize="OK"></a>
              <a class="btn" id="simpleinputcancel" localize="Cancel"></a>
            </div>
          </div>
        </div>
      </div>

      <!--Layer Manager Recursive Tree Template (shared)-->

      <script type="text/ng-template" id="tree-toggle">
        <i class="fa"
           ng-if="hasChildren(node)"
           ng-class="collapsed(node) ? 'fa-plus-square-o' : 'fa-minus-square-o'"
           ng-click="collapse(node)"></i>
        <i ng-if="!hasChildren(node)" class="fa">&nbsp;&nbsp;&nbsp;</i>
      </script>

      <script type="text/ng-template" id="tree-node">
        <div ng-show="name || node.name">
          <ng-include src="'tree-toggle'"></ng-include>

          <div ng-if="isObjectNode(node)"
               class="checkbox"
               ng-right-click="showMenu(node,$event)"
               ng-class="{activelayer:node.active}">
            <label data-ng-class="{checked:node.enabled, disabledChild:!node.enabled}"
                   localize="{{name}}"
                   ng-click="selectionChanged(node,$event)"
                   localize-only="title">
              <input type="checkbox" ng-model="node.enabled"/>
              <span localize="{{name}}"></span>
            </label>
          </div>

          <div class="checkbox"
               ng-if="!isObjectNode(node)"
               ng-class="{activelayer:node.active}">
            <label data-ng-class="{checked:node.checked, disabledChild:node.disabled}"
                   localize="{{node.name}}"
                   localize-only="title"
                   ng-click="selectionChanged(node,$event)">
              <input type="checkbox"
                     ng-model="node.checked"
                     ng-disabled="node.disabled"
                     ng-change="nodeChange(node)" />
              <span localize="{{node.name}}"></span>
            </label>
          </div>

          <div class="indent"
                ng-class="collapsed(node) ? ' collapsed' : ''"
                ng-repeat="(name,node) in getChildren(node)"
                ng-include="'tree-node'">
          </div>
        </div>
      </script>

      <!-- Mobile UI -->

      <div ng-if="is_mobile">

        <!-- Tracking status readout -->

        <div ng-show="showMobileTracking()" class="tracking-container">
          <div title="{{trackingObj.get_name()}}" class="small">
            <strong localize="Tracking"></strong>
            <br/>
            {{trackingObj.get_name()}}
          </div>
        </div>

        <!-- mobile Explore modal -->

        <ng-include src="'<%= webclient_static_assets_url_prefix %>views/modals/mobile-explore.html?v=<%= shortSHA %>'"></ng-include>

        <!-- Top Navbar -->

        <div class="navbar navbar-inverse navbar-fixed-top" ng-controller="MobileNavController"  ng-show="!tourPlaying">
          <div class="container">
            <!-- The three buttons: menu, share, settings -->

            <div class="navbar-header">
              <button class="btn navbar-toggle pull-right"
                      ng-click="hideMenu('#mobile-menu-nav')"
                      data-target="#mobile-settings-nav"
                      data-toggle="collapse"
                      type="button">
                <i class="fa fa-cog"></i>
              </button>

              <button class="btn navbar-toggle pull-left"
                      ng-click="hideMenu('#mobile-settings-nav')"
                      data-target="#mobile-menu-nav"
                      data-toggle="collapse"
                      type="button">
                <i class="fa fa-bars"></i>
              </button>

              <button class="btn navbar-toggle pull-left"
                      data-bs-popover="popover"
                      tabindex="0"
                      localize="Share this place"
                      localize-only="title"
                      data-content-template="<%= webclient_static_assets_url_prefix %>views/popovers/shareplace.html?v=<%= shortSHA %>"
                      data-container="body"
                      data-placement="bottom-left">
                <i class="fa fa-share-alt-square"></i>
              </button>
            </div>

            <!-- Mobile navbar menu -->

            <div id="mobile-menu-nav" class="navbar-collapse collapse">
              <ul class="nav navbar-nav">
                <li>
                  <a ng-click="gotoPage('<%= userweb_url_prefix %>/home')" target="_blank" localize="Main WWT Website"></a>
                </li>

                <li>
                  <a ng-click="gotoPage('https://wwt-forum.org/')" target="_blank" localize="WWT User Forums"></a>
                </li>

                <li>
                  <a ng-click="gotoPage('https://worldwidetelescope.github.io')" target="_blank" localize="Contributor Hub"></a>
                </li>

                <li>
                  <a ng-click="gotoPage('https://bit.ly/wwt-signup')" localize="Sign Up for Newsletter"></a>
                </li>

                <li>
                  <a ng-click="gotoPage('<%= userweb_url_prefix %>/About')" localize="About WorldWide Telescope"></a>
                </li>

                <li>
                  <a ng-click="gotoPage('https://numfocus.org/donate-for-worldwide-telescope')" localize="Support WWT ❤️"></a>
                </li>
              </ul>
            </div>

            <!-- Mobile settings -->

            <div id="mobile-settings-nav" class="navbar-collapse collapse">
              <ul class="nav navbar-nav">
                <li class="dropdown">
                  <a href="javascript:void(0)" localize="Look At" localize-only="title" class="dropdown-toggle" data-toggle="dropdown">
                    <span localize="Look At"></span>
                    <i class="fa fa-angle-down"></i>
                    <span class="highlight">{{lookAt}}</span>
                  </a>

                  <ul class="dropdown-menu" >
                    <li ng-repeat="type in lookTypes" ng-click="hideMenu()">
                      <a href="javascript:void(0)" ng-click="lookAtDropdownChanged(type);">
                        {{type}}
                      </a>
                    </li>
                  </ul>
                </li>

                <li class="dropdown">
                  <a href="javascript:void(0)" localize="Imagery" localize-only="title" class="dropdown-toggle" data-toggle="dropdown">
                    <span localize="Imagery"></span>
                    <i class="fa fa-angle-down"></i>
                    <span class="highlight">{{backgroundImagery.get_name()}}</span>
                  </a>

                  <ul class="dropdown-menu" >
                    <li ng-repeat="s in surveys" ng-click="hideMenu()">
                      <a href="javascript:void(0)" ng-click="setSurveyBg(s.name);">
                        {{::s.name}}
                      </a>
                    </li>
                  </ul>
                </li>

                <li>
                  <hr/>
                </li>

                <li class="modal-buttons">
                  <a class="btn" ng-repeat="m in modalButtons" ng-click="showModal(m)">
                    <i class="fa {{::m.icon}}"></i>
                    {{::m.text}}
                  </a>
                </li>

                <li>
                  <hr class="clearfix"/>
                </li>

                <li>
                  <a ng-click="resetCamera()" localize="Reset Camera"></a>
                </li>
              </ul>
            </div>
          </div>
        </div>

        <!-- mobile Loading popup -->

        <div ng-class="isLoading ?  'mobile-loading' : 'hide'">
          <a class="pull-left" href="/home" style="margin-left: -11px;">
            <img ng-src='<%= webclient_static_assets_url_prefix %>images/wwtlogo.png?v=<%= shortSHA %>'
                 localize="WorldWide Telescope Logo"
                 localize-only="alt"
                 style="height:60px;width:60px"/>
          </a>

          <h3>
            World<span class="brand-blue">Wide Telescope</span>
          </h3>

          <br />

          <h4 localize="Welcome to the WorldWide Telescope Web Client"></h4>

          <br />

          <p style="text-align:center">
            <i class="fa fa-spin fa-spinner"></i>
            <span localize="WorldWide Telescope is loading."></span><br />
            <span localize="Please wait."></span>
          </p>

          <br />

          <p class="small" localize="Please ensure you have a strong connection to the internet for the best experience.">
            Please ensure you have a strong connection to the internet for the best experience.
          </p>

          <div class="checkbox pull-left">
            <label data-ng-class="iswebclientHome ? 'checked' : ''">
              <input type="checkbox" ng-model="iswebclientHome" ng-change="homePrefChange(iswebclientHome)" />
              <span localize="Show the web client as WWT landing page"></span>
            </label>
          </div>
        </div>

        <!-- Mobile screen bottom: nearby objects / context popup, cross-fader, skyball -->

        <ng-include src="'<%= webclient_static_assets_url_prefix %>views/modals/mobile-nearby-objects.html?v=<%= shortSHA %>'"></ng-include>

        <div class="context-panel">
          <div class="nearby-objects"
               ng-if="nbo.length && (lookAt == 'Sky' || lookAt=='SolarSystem')"
               ng-show="!tourPlaying">
            <a ng-click="showNbo()" title="{{nbo[0].get_name()}}" class="thumbnail">
              <img ng-src="{{nbo[0].get_thumbnailUrl()}}" alt="Thumbnail of {{nbo[0].get_name()}}" />
              <label localize="Nearby"></label>
            </a>

            <div class="nbo-count">{{nboCount}}</div>
          </div>

          <!-- Bottom-center cross-fader -->

          <div class="control x-fader-mobile" ng-show="displayXFader()">
            <label localize="Image Crossfade"></label>
            <div class="cross-fader">
              <a class="btn">&nbsp;</a>
            </div>
          </div>

          <!-- Mobile skyball -->

          <div class="fov-panel mobile" ng-show="lookAt=='Sky' && !tourPlaying">
            <div class="left">
              <p localize="N"></p>
              <div class="sphere mobile" id="skyball">
                <div class="v-ellipse"></div>
                <div class="h-ellipse"></div>
                <div class="x-axis"></div>
                <div class="y-axis"></div>
              </div>
            </div>
          </div>
        </div>
      </div> <!-- end mobile UI block -->

      <!-- Desktop (non-mobile) UI -->

      <div ng-if="!is_mobile">
        <!-- Popups -->

        <ng-include src="'<%= webclient_static_assets_url_prefix %>views/research-menu.html?v=<%= shortSHA %>'"></ng-include>

        <ng-include src="'<%= webclient_static_assets_url_prefix %>views/modals/finder-scope.html?v=<%= shortSHA %>'" onload="initFinder()"></ng-include>

        <div data-ng-controller="ViewController"></div>

        <ul class="dropdown-menu" role="menu" id="topMenu"></ul>

        <!-- Very top ribbon -->

        <div id="ribbon">
          <span class="pull-right" ng-controller="LoginController">
            <a class="btn pull-right" ng-click="login()" ng-show="msLiveOAuthAppId && msLiveOAuthAppId.length && !loggedIn">
              <span localize="Sign In"></span>
            </a>
            <a class="btn pull-right" ng-click="logout()" ng-show="msLiveOAuthAppId && msLiveOAuthAppId.length && loggedIn">
              <span localize="Sign Out"></span>
            </a>
            <a class="btn pull-right" href="https://numfocus.org/donate-for-worldwide-telescope" target="_blank">
              <span>Support WWT ❤️</span>
            </a>
          </span>

          <ul class="wwt-tabs">
            <li>
              <div class="outer">
                <a href="javascript:void(0)">
                  <span class="label"
                        data-ng-click="menuClick(ribbon.home_tab.menu, '#tabMenuHome')"
                        id="{{ribbon.home_tab.button}}"
                        localize="{{ribbon.home_tab.label}}"></span>
                  <div class="menu"
                       data-ng-click="menuClick(ribbon.home_tab.menu, '#tabMenuHome')"
                       id="tabMenuHome"
                       data-target="#menuHome">
                    <i class="fa fa-caret-down"></i>
                  </div>
                </a>
              </div>
            </li>

            <li data-ng-repeat="tab in ribbon.tabs" data-ng-class="activePanel == tab.label ? 'active' : ''">
              <div class="outer">
                <a href="javascript:void(0)">
                  <span class="label" data-ng-click="tabClick(tab)" id="{{tab.button}}" localize="{{tab.label}}"></span>
                  <div class="menu" data-ng-click="menuClick(tab.menu)" id="tabMenu{{$index}}" data-target="#menu{{$index}}">
                    <i class="fa fa-caret-down"></i>
                  </div>
                </a>
              </div>
            </li>

            <li data-ng-class="activePanel == 'currentTour'  ? 'active' : currentTour && currentTour._title ? '' :'hide'">
              <div class="outer">
                <a href="javascript:void(0)" ng-click="activePanel = 'currentTour';initSlides()">
                  <span class="label" style="padding-right:22px">{{currentTour._title}}</span>
                  <span ng-click="closeTour($event)" class="close-tour"><i class="fa fa-close"></i></span>
                </a>
              </div>
            </li>
          </ul>
        </div>

        <!-- Top panel -->

        <div class="{{topExpanded && activePanel.toLowerCase() == expandedPanel ? 'top-panel top-expanded' : 'top-panel'}}"
             id="topPanel"
             ng-switch="activePanel">

          <!-- Explore panel -->

          <div
            ng-show="!loadingUrlPlace"
            ng-switch-when="Explore"
            class="{{expanded ? 'explore-panel rel expanded' : 'explore-panel rel'}}"
            ng-controller="ExploreController">
            <span ng-repeat="bc in breadCrumb" class="bc">
              <a href="javascript:void(0)" ng-click="breadCrumbClick($index)">{{bc}}</a>&nbsp;&gt;&nbsp;
            </span>

            <br />

            <div class="explore-thumbs">
              <div class="ribbon-thumbs" ng-repeat="item in collectionPage">
                <ng-include src="'<%= webclient_static_assets_url_prefix %>views/thumbnail.html?v=<%= shortSHA %>'"></ng-include>
              </div>
            </div>

            <label class="wwt-pager">
              <a href="javascript:void(0)" data-ng-disabled="currentPage == 0" ng-click="goBack()">
                <i class="fa fa-play reverse"></i>
              </a>
              {{(currentPage+1)}} <span localize="of"></span> {{pageCount}}
              <a href="javascript:void(0)" ng-disabled="currentPage == pageCount - 1" ng-click="goFwd()">
                <i class="fa fa-play"></i>
              </a>
            </label>

            <a class="{{expanded ? 'expanded btn tn-expander' : 'btn tn-expander'}}" ng-click="expandThumbnails()">
              <i class="fa fa-caret-down" ng-if="!expanded"></i>
              <i class="fa fa-caret-up" ng-if="expanded"></i>
            </a>
          </div>

          <!-- Tours panel -->

          <div ng-switch-when="Guided Tours" id="toursPanel" ng-controller="ToursController">
            <span ng-repeat="bc in breadCrumb" class="bc">
              <a href="javascript:void(0)" ng-click="breadCrumbClick($index)">{{bc}}</a>&nbsp;&gt;&nbsp;
            </span>

            <br />

            <div class="ribbon-thumbs" ng-repeat="item in tourList">
              <span class="tour-thumb"
                    id="tourthumb{{$index}}"
                    ng-if="item.thumb.length > 15 && $index >= currentPage * pageSize && $index < (currentPage+1) * pageSize">
                <a ng-click="clickThumb(item)"
                   ng-mouseenter="tourPreview($event, item)"
                   title="{{item.get_name()}}"
                   ng-class="item.thumb + item.get_name() == activeItem ? 'thumbnail active' : 'thumbnail'" >
                  <img ng-src="{{item.thumb}}" alt="Thumbnail of {{item.get_name()}}" />
                  <label>{{item.get_name()}}</label>
                </a>
              </span>

              <span ng-if="item.thumb.length > 15 && !($index >= currentPage * pageSize && $index < (currentPage+1) * pageSize)">
                <img ng-src="{{item.thumb}}" class="offscreen" />
              </span>
            </div>

            <label class="wwt-pager">
              <a href="javascript:void(0)"
                 data-ng-disabled="currentPage == 0"
                 ng-click="currentPage = currentPage == 0 ? currentPage : currentPage - 1">
                <i class="fa fa-play reverse"></i>
              </a>
              {{(currentPage + 1)}} <span localize="of"></span> {{pageCount}}
              <a href="javascript:void(0)"
                 ng-disabled="currentPage == pageCount - 1"
                 ng-click="currentPage = currentPage == pageCount - 1 ? currentPage : currentPage + 1">
                <i class="fa fa-play"></i>
              </a>
            </label>
          </div>

          <!-- Search panel -->

          <div ng-switch-when="Search"
               ng-controller="SearchController"
               id="searchPanel"
               class="{{expanded ? 'explore-panel rel expanded' : 'explore-panel rel'}}">
            <div class="search-controls">
              <div class="iblock input-group">
                <input type="search" id="txtSearch" ng-model="q" ng-keydown="searchKeyPress()" localize="Object Search" localize-only="placeholder" />
                <span class="fa fa-search form-control-feedback"></span>
              </div>
              <div class="control-group">
                <div class="select">
                  <select ng-model="SearchType">
                    <option value="J2000" localize="J2000"></option>
                  </select>
                </div>
                &nbsp;
                <label>
                  <span localize="RA"></span>
                  <input type="text" ng-model="goto.RA" />
                </label>

                <label>
                  <span localize="Dec"></span>
                  <input type="text" ng-model="goto.Dec" />
                </label>
                <a class="btn" ng-click="gotoCoord()" localize="Go"></a>
                <label ng-if="goto.error"><em localize="Invalid coordinates"></em></label>
              </div>
            </div>
            <div class="search-results">
              <div class="ribbon-thumbs" ng-repeat="item in collectionPage">
                <ng-include src="'<%= webclient_static_assets_url_prefix %>views/thumbnail.html?v=<%= shortSHA %>'"></ng-include>
              </div>
            </div>
            <label class="wwt-pager" ng-show="collection.length > 0">
              <a href="javascript:void(0)" data-ng-disabled="currentPage == 0" ng-click="goBack()">
                <i class="fa fa-play reverse"></i>
              </a>
              {{(currentPage + 1)}} <span localize="of"></span> {{ pageCount }}
              <a href="javascript:void(0)" ng-disabled="currentPage == pageCount - 1" ng-click="goFwd()">
                <i class="fa fa-play"></i>
              </a>
            </label>
            <a class="{{expanded ? 'expanded btn tn-expander' : 'btn tn-expander'}}" ng-click="expandThumbnails()">
              <i class="fa fa-caret-down" ng-if="!expanded"></i>
              <i class="fa fa-caret-up" ng-if="expanded"></i>
            </a>
          </div>

          <!-- Communities panel -->

          <div
            ng-show="!loadingUrlPlace"
            ng-switch-when="Communities"
            id="communityPanel"
            class="{{expanded ? 'explore-panel rel expanded' : 'explore-panel rel'}}"
            ng-controller="CommunityController">
            <span ng-repeat="bc in breadCrumb" class="bc">
              <a href="javascript:void(0)" ng-click="breadCrumbClick($index)">{{bc}}</a>&nbsp;&gt;&nbsp;
            </span>

            <br />

            <div class="explore-thumbs">
              <div class="ribbon-thumbs" ng-repeat="item in collectionPage">
                <ng-include src="'<%= webclient_static_assets_url_prefix %>views/thumbnail.html?v=<%= shortSHA %>'"></ng-include>
              </div>
            </div>

            <label class="wwt-pager">
              <a href="javascript:void(0)" data-ng-disabled="currentPage == 0" ng-click="goBack()">
                <i class="fa fa-play reverse"></i>
              </a>
              {{(currentPage+1)}} <span localize="of"></span> {{pageCount}}
              <a href="javascript:void(0)" ng-disabled="currentPage == pageCount - 1" ng-click="goFwd()">
                <i class="fa fa-play"></i>
              </a>
            </label>

            <a class="{{expanded ? 'expanded btn tn-expander' : 'btn tn-expander'}}" ng-click="expandThumbnails()">
              <i class="fa fa-caret-down" ng-if="!expanded"></i>
              <i class="fa fa-caret-up" ng-if="expanded"></i>
            </a>
          </div>

          <!-- View panel -->

          <div ng-switch-when="View" data-ng-controller="ViewController">
            <div class="layer-manager-toggle">
              <label localize="Use Layer Manager to Control User Settings"></label>
              <a href="javascript:void(0)"
                 class="layer-manager-icon"
                 localize="Show/Hide Layer Manager"
                 localize-only="title"
                 ng-click="toggleLayerManager()">&nbsp;</a>
            </div>

            <fieldset>
              <div>
                <label localize="Name">Name:</label>
                <label>{{observingLocation.name}}</label>
              </div>

              <div>
                <div class="pull-right">
                  <label localize="Alt">Alt:</label>
                  <label>{{ctl.settings.get_locationAltitude().toFixed(1) + 'm'}}</label>
                </div>
                <label localize="Lat">Lat:</label>
                <label>{{formatHms(ctl.settings.get_locationLat())}}</label>
              </div>

              <div class="clearfix">
                <label localize="Lng">Lng:</label>
                <label>{{formatHms(ctl.settings.get_locationLng())}}</label>
              </div>

              <div class="checkbox iblock">
                <label data-ng-class="viewFromLocation ? 'checked' : ''">
                  <input type="checkbox" ng-model="viewFromLocation" ng-change="setViewFromLocation()" />
                  <span localize="View From This Location"></span>
                </label>
              </div>
              <a class="btn" localize="Setup" ng-click="showObservingLocationOptions()"></a>
            </fieldset>

            <fieldset>
              <a class="btn" bs-popover
                 localize="Observing Time"
                 localize-only="title"
                 data-content-template="<%= webclient_static_assets_url_prefix %>views/popovers/observing-time.html?v=<%= shortSHA %>"
                 ng-controller="ObservingTimeController"
                 data-animation="am-flip-x"
                 data-placement="bottom-right">
                {{now | date:'yyyy/MM/dd HH:mm:ss'}} &nbsp; <i class="fa fa-caret-down"></i>
              </a>

              <div><label>{{TimeMode}}</label></div>

              <div class="time-buttons">
                <a class="btn" ng-click="fastBack_Click()">
                  <i class="fa fa-fast-backward"></i>
                </a>

                <a class="btn" ng-click="back_Click()">
                  <i class="fa fa-backward"></i>
                </a>
                <a class="btn" ng-click="pause_Click()">
                  <i class="fa fa-pause"></i>
                </a>

                <a class="btn" ng-click="play_Click()">
                  <i class="fa fa-play"></i>
                </a>

                <a class="btn" ng-click="fastForward_Click()" id="btnFastFwd">
                  <i class="fa fa-fast-forward"></i>
                </a>

                &nbsp;
                <a class="btn" ng-click="timeNow_Click()" id="btnTimeNow">Now</a>
              </div>
            </fieldset>

            <fieldset>
              <div class="checkbox">
                <label data-ng-class="galaxyMode ? 'checked' : ''">
                  <input type="checkbox" ng-model="galaxyMode" ng-change="galaxyModeChange()" />
                  <span data-localize="Galactic Plane Mode">Galactic Plane Mode</span>
                </label>
              </div>

              <div style="margin:8px 0 8px 0">
                <label localize="View in ESASky"></label><br/>
                <a class="btn" bs-tooltip="'See current view in ESASky'"
                   href="http://sky.esa.int/?action=goto&target={{viewport.RA*15}}%20{{viewport.Dec}}&hips=DSS2%20color&fov={{viewport.Fov}}&cooframe=J2000&sci=true" target="esasky">
                  <img ng-src='<%= webclient_static_assets_url_prefix %>images/esasky-logo.png?v=<%= shortSHA %>'/>
                </a>
              </div>
            </fieldset>
          </div>

          <!-- Settings panel -->

          <div ng-switch-when="Settings" ng-controller="SettingsController">
            <fieldset>
              <div class="iblock">
                <div class="checkbox">
                  <label data-ng-class="crosshairs ? 'checked' : ''">
                    <input type="checkbox" ng-model="crosshairs" data-ng-change="saveSettings()" />
                    <span localize="Reticle/Crosshairs"></span>
                  </label>
                </div>
                <div class="checkbox">
                  <label data-ng-class="autoHideTabs ? 'checked' : ''">
                    <input type="checkbox" ng-model="autoHideTabs" data-ng-change="saveSettings()" />
                    <span localize="Auto Hide Tabs"></span>
                  </label>
                </div>
                <div class="checkbox">
                  <label data-ng-class="autoHideContext ? 'checked' : ''">
                    <input type="checkbox" ng-model="autoHideContext" data-ng-change="saveSettings()" />
                    <span localize="Auto Hide Context"></span>
                  </label>
                </div>
                <div class="checkbox">
                  <label data-ng-class="smoothPanning ? 'checked' : ''">
                    <input type="checkbox" ng-model="smoothPanning" data-ng-change="saveSettings()" />
                    <span localize="Smooth Panning"></span>
                  </label>
                </div>
              </div>
            </fieldset>

            <fieldset class="bottom-padded">
              <label localize="Preferred Client"></label><br />
              <select ng-change="setClientPref()" ng-model="preferredClient" ng-options="c.code as c.label for c in availableClients"></select>

              <div ng-if="redirecting">
                <span localize="Redirecting to Silverlight Client in"></span>
                {{redirectingSeconds}}
                <span localize="seconds"></span>

                <a class="btn" ng-click="cancelRedir()">
                  <i class="fa fa-stop"></i>
                  <span localize="Stop"></span>
                </a>
              </div>
            </fieldset>

            <fieldset class="bottom-padded">
              <label localize="Select Your Language"></label><br />
              <select ng-change="setLanguageCode(selectedLanguage)"
                      ng-model="selectedLanguage"
                      ng-options="l.code as l.label for l in availableLanguages"></select>
            </fieldset>
          </div>

          <!-- current tour panel -->

          <div ng-show="!loadingUrlPlace"
               ng-switch-when="currentTour"
               id="currentTourPanel"
               class="explore-panel rel curtour-panel"
               ng-controller="CurrentTourController"
               ng-init="init(tour)">
            <table>
              <colgroup>
                <col style="width:80px"/>
                <col style="width:100%"/>
                <col ng-style="{'width':editingTour ? 374 : 1 }"/>
              </colgroup>
              <tr>
                <td class="play-tour">
                  <a class="btn-play-tour" ng-click="playButtonClick()">
                    <i class="fa fa-play" ng-if="!tourEdit.playing"></i>
                    <div class="paused" ng-if="tourEdit.playing">
                      <i class="fa fa-minus"></i>
                      <i class="fa fa-minus"></i>
                    </div>
                  </a><br/>
                  <div class="small" localize="Run Time"></div>
                  <div class="small">{{ !tour.minuteDuration ? '00' : tour.minuteDuration > 9 ? tour.minuteDuration : '0' + tour.minuteDuration}}:{{ !tour.secDuration ? '00' : tour.secDuration > 9 ? tour.secDuration : '0' + tour.secDuration}}</div>
                </td>

                <td class="tour-stops">
                  <div class="scroller" data-jquery-scrollbar>
                    <div class="stops-container">
                      <a class="btn" bs-popover
                         style="position:absolute;top:110px;left:190px;visibility:hidden"
                         template-url="<%= webclient_static_assets_url_prefix %>views/popovers/tour-properties.html?v=<%= shortSHA %>"
                         trigger="click" placement="bottom-left" data-content="{tour}"
                         data-container="body" id="newTourProps"></a>
                      <div class="stop-arrow" ng-repeat="stop in tourStops">
                        <div class="transition-choice {{stop.transHover ? 'active' : ''}}"
                             bs-popover template-url="<%= webclient_static_assets_url_prefix %>views/popovers/transition-type.html?v=<%= shortSHA %>"
                             trigger="click" placement="bottom-left" data-content="{1}"
                             title="Transition" data-container="body" data-auto-close="true"
                             data-on-show="testfn()" data-on-hide="testfn()">
                          <!-- slew -->
                          <div class="right-arrow choice" ng-if="stop.transitionType==0">
                            <i class="arrow-line"></i><i class="arrow-head"></i>
                          </div>
                          <!-- xfade -->
                          <div class="crossfade choice" ng-if="stop.transitionType==1">
                            <span class="shape"></span>
                          </div>
                          <!-- xcut -->
                          <div class="abrupt choice" ng-if="stop.transitionType==2">
                            <span class="shape"></span>
                          </div>
                          <!-- fadeoutin -->
                          <div class="fadeout-in choice" ng-if="stop.transitionType==3">
                            <span class="shape left"></span>
                            <span class="shape right"></span>
                          </div>
                          <!-- fadein -->
                          <div class="fadein choice" ng-if="stop.transitionType==4">
                            <span class="shape"></span>
                          </div>
                          <!-- fadeout -->
                          <div class="fadeout choice" ng-if="stop.transitionType==5">
                            <span class="shape"></span>
                          </div>
                        </div>

                        <div class="thumbwrap">
                          <span class="master-slide" ng-if="stop.isMaster">M</span>
                          <span class="slide-number" ng-if="slideNumbering">{{$index}}</span>
                          <div class="stop-thumb thumbnail {{(tourEdit.tourStopList.selectedItems[$index]) || (activeIndex == $index) ? 'active' : ''}}"
                               index="{{$index}}"
                               ng-click="selectStop($index, $event)"
                               ng-dblclick="showStartCameraPosition($index)"
                               ng-context-menu="showContextMenu">
                            <a class="ear stop-start{{tourEdit.playing && activeIndex === $index && stop._tweenPosition < .5 ? ' active' : ''}}" ng-click="showStartCameraPosition($index)" ng-show="(editingTour ||tourEdit.playing) && $index == activeIndex"></a>
                            <a class="ear stop-end{{tourEdit.playing && activeIndex === $index && stop._tweenPosition >= .5 ? ' active' : ''}}" ng-click="showEndCameraPosition($index)" ng-show="(editingTour ||tourEdit.playing) && $index == activeIndex"></a>
                            <img ng-src="{{stop.thumb.src}}" alt="{{stop.description}}"/>
                            <label class="slide-label" contenteditable="true" bs-tooltip data-title="{{stop.description}}" placement="bottom" container="body"></label>
                            <label class="duration" contenteditable="true"></label>
                            <a class="btn tinybutton duration-up" ng-if="stop.editingDuration">
                              <i class="fa fa-caret-up"></i>
                            </a>
                            <a class="btn tinybutton duration-down" ng-if="stop.editingDuration">
                              <i class="fa fa-caret-down"></i>
                            </a>
                          </div>
                        </div>
                      </div>

                      <div class="stop-arrow" ng-if="editingTour">
                        <div class="transition-choice invisible"></div>
                        <div class="thumbwrap">
                          <div class="stop-thumb thumbnail"
                               ng-click="tourEdit.addSlide(false);refreshStops()">
                            <label class="slide-label" localize="Add New Slide" style="position:relative;top:20px;width:90px;text-align:center"></label>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </td>

                <td class="edit-panel">
                  <div ng-if="editingTour" class="edit-panel">
                    <script src="//cdnjs.cloudflare.com/ajax/libs/tinymce/4.4.1/tinymce.min.js"></script>
                    <link href="<%= webclient_static_assets_url_prefix %>css/skin.min.css?v=<%= shortSHA %>" rel="stylesheet" />
                    <div class="left">
                      <a class="btn" bs-popover
                         localize="Tour Properties" style="width:98px;"
                         template-url="<%= webclient_static_assets_url_prefix %>views/popovers/tour-properties.html?v=<%= shortSHA %>"
                         trigger="click" placement="bottom-left" data-content="{tour}"
                         title="Tour Properties" data-container="body"></a>
                      <a class="btn" localize="Save" style="width:48px;" ng-click="saveTour()"></a>

                      <div>
                        <a class="btn menu-button text" bs-modal template-url="<%= webclient_static_assets_url_prefix %>views/popovers/tour-text.html?v=<%= shortSHA %>"
                           trigger="click" data-content="{tour}" id="editTourText" placement="center"
                           title="Enter Text" data-container="body">
                          <div class="icon">
                            <i class="A">A</i>
                            <i class="tbar"></i>
                            <i class="tbar"></i>
                            <i class="tbar longbar"></i>
                          </div>
                          <label localize="Text">Text</label>
                        </a>
                        <a class="btn menu-button shape" bs-dropdown aria-haspopup="true" aria-expanded="false">
                          <i class="sq"></i><i class="circ"></i>
                          <label localize="Shape"></label>
                          <span class="fa fa-caret-down"></span>
                        </a>
                        <ul class="dropdown-menu" role="menu">
                          <li><a href="javascript:void(0)" ng-click="addShape(0)">Circle</a></li>
                          <li><a href="javascript:void(0)" ng-click="addShape(1)">Rectangle</a></li>
                          <li><a href="javascript:void(0)" ng-click="addShape(6)">Open Rectangle</a></li>
                          <li><a href="javascript:void(0)" ng-click="addShape(3)">Ring</a></li>
                          <li><a href="javascript:void(0)" ng-click="addShape(5)">Line</a></li>
                          <li><a href="javascript:void(0)" ng-click="addShape(4)">Arrow</a></li>
                          <li><a href="javascript:void(0)" ng-click="addShape(2)">Star</a></li>
                        </ul>
                        <a class="btn menu-button picture" ng-click="launchFileBrowser('addPicture')">
                          <i class="fa fa-photo"></i>
                          <label localize="Picture"></label>
                        </a>
                        <input type="file" id="addPicture" onchange="angular.element(this).scope().mediaFileChange(event,'image',true)" style="position:absolute"/>
                      </div>
                    </div>

                    <div class="right">
                      <div class="sound-container">
                        <label localize="Music:"></label><label style="width:160px;overflow:hidden;white-space:nowrap;position:relative;top:4px" title="{{activeSlide.music ? activeSlide.music.name : ''}}">&nbsp;
                          {{activeSlide.music ? activeSlide.music.name : ''}}</label>
                        <div>
                          <a class="btn remove" localize="Remove" ng-if="activeSlide.music" ng-click="activeSlide.music = activeSlide._musicTrack = null"></a>
                          <input type="file" class="audiofile{{activeSlide.music?' has-file':''}}" id="musicFile" localize="Browse..." onchange="angular.element(this).scope().mediaFileChange(event,'music')"  />
                          <a class="browse btn" localize="Browse..." ng-if="!activeSlide.music"  ng-click="launchFileBrowser('musicFile')"></a>
                          <a class="btn{{!activeSlide.music?' disabled' : ''}}" ng-click="activeSlide.music.mute(!activeSlide.music.muted)" ng-disabled="!activeSlide.music">
                            <i class="fa fa-volume-up" ng-if="!activeSlide.music || !activeSlide.music.muted"></i>
                            <i class="fa fa-ban" ng-if="activeSlide.music && activeSlide.music.muted"></i>
                          </a>
                          <div class="sound-level  {{!activeSlide.music || activeSlide.music.muted ? 'disabled' : ''}}">
                            <a class="btn  {{!activeSlide.music || activeSlide.music.muted ? 'disabled' : ''}}" ng-style="{left: activeSlide.music ? activeSlide.music.vol : 50, position: 'absolute'}" id="musicVol">&nbsp;</a>
                          </div>
                        </div>
                      </div>

                      <div class="sound-container">
                        <label localize="Voiceover:"></label><label style="width:143px;overflow:hidden;white-space:nowrap;position:relative;top:4px" title="{{activeSlide.voice ? activeSlide.voice.name : ''}}">&nbsp;
                          {{activeSlide.voice ? activeSlide.voice.name : ''}}</label>
                        <div>
                          <a class="btn remove" localize="Remove" ng-if="activeSlide.voice" ng-click="activeSlide.voice = activeSlide._voiceTrack = null"></a>

                          <input type="file" id="voiceFile" class="audiofile" localize="Browse..." onchange="angular.element(this).scope().mediaFileChange(event,'voiceOver')"  />
                          <a class="browse btn" localize="Browse..." ng-if="!activeSlide.voice"  ng-click="launchFileBrowser('voiceFile')"></a>

                          <a class="btn{{!activeSlide.voice?' disabled' : ''}}" ng-click="activeSlide.voice.mute(!activeSlide.voice.muted)" ng-disabled="!activeSlide.voice">
                            <i class="fa fa-volume-up" ng-if="!activeSlide.voice || !activeSlide.voice.muted"></i>
                            <i class="fa fa-ban" ng-if="activeSlide.voice && activeSlide.voice.muted"></i>
                          </a>
                          <div class="sound-level {{!activeSlide.voice || activeSlide.voice.muted ? 'disabled' : ''}}">
                            <a class="btn {{!activeSlide.voice || activeSlide.voice.muted ? 'disabled' : ''}}"
                               ng-style="{left: activeSlide.voice ? activeSlide.voice.vol : 50, position: 'absolute'}" id="voiceVol">&nbsp;</a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
              </tr>
            </table>

            <ng-include src="'<%= webclient_static_assets_url_prefix %>views/popovers/slide-overlays.html?v=<%= shortSHA %>'"></ng-include>
          </div>
        </div>

        <!-- The Layer Manager side panel -->

        <div class="layer-manager desktop"
             ng-controller="LayerManagerController"
             ng-style="{display: layerManagerHidden ? 'none' : 'block',height:  layerManagerHeight() + 28}"
             ng-init="initLayerManager()">
          <button aria-hidden="true"
                  class="close pull-right"
                  type="button"
                  ng-click="toggleLayerManager()"
                  style="font-weight: 100;font-size: 16px">x</button>

          <h5 localize="Layers"></h5>

          <div class="tree" ng-style="{ height: layerManagerHeight()-90 }">
            <div
              ng-class="sunTree.Sun.collapsed ? 'collapsed' : ''"
              ng-repeat="(name,node) in sunTree"
              ng-include="'tree-node'">
            </div>

            <i class="fa"
               ng-class="collapsed(tree) ? 'fa-plus-square-o' : 'fa-minus-square-o'"
               ng-click="collapse(tree)"></i>

            <div class="checkbox" ng-right-click="showMenu(skyNode,$event)" ng-class="{activelayer:skyNode.active}">
              <label data-ng-class="{checked:tree.checked}" localize="Sky" ng-click="selectionChanged(tree,$event)"
                     localize-only="title">
                <input type="checkbox" ng-model="tree.checked"/>
                <span localize="Sky"></span>
              </label>
            </div>

            <div class="indent"
                 ng-class="collapsed(tree) ? ' collapsed' : ''"
                 ng-repeat="(name,node) in getChildren(tree)"
                 ng-include="'tree-node'">
            </div>
          </div>

          <div class="time-scrubber">
            <h5 localize="Time Scrubber" id="timeScrubberLabel" ng-if="!scrubber.title"></h5>
            <h5 ng-if="scrubber.title">{{scrubber.title}}</h5>

            <div class="control">
              <span class="pull-right" id="scrubberRightLabel">{{scrubber.right}}&nbsp;</span>
              <span id="scrubberLeftLabel">{{scrubber.left}}&nbsp;</span>
              <div class="scrubber-slider">
                <a class="btn"></a>
              </div>

              <div class="checkbox iblock" ng-if="activeLayer && activeLayer.canUseScrubber" style="margin:15px 65px 0 0;">
                <label data-ng-class="activeLayer.timeSeries ? 'checked' : ''">
                  <input type="checkbox" ng-model="activeLayer.timeSeriesChecked" ng-change="setTimeSeries(activeLayer, activeLayer.timeSeriesChecked)" />
                  <span localize="Time series"></span>
                </label>
              </div>
              <div class="checkbox iblock" ng-if="activeLayer && activeLayer.canUseScrubber" style="margin-top:15px;">
                <label data-ng-class="activeLayer.loopChecked ? 'checked' : ''">
                  <input type="checkbox" ng-model="activeLayer.loopChecked" ng-change="setAutoLoop(activeLayer,activeLayer.loopChecked)" />
                  <span localize="Auto Loop"></span>
                </label>
              </div>
            </div>
          </div>
        </div>

        <!-- The lower Context panel -->

        <div ng-class="contextPanelClass()">
          <div ng-class="fovClass()">
            <a class="btn"
               tabindex="0"
               data-bs-popover="popover"
               ng-if="!showTrackingString()"
               style="position:absolute; top:6px;left:-33px;z-index:3"
               localize="Share this view"
               localize-only="title"
               data-content-template="<%= webclient_static_assets_url_prefix %>views/popovers/shareplace.html?v=<%= shortSHA %>"
               data-container="body"
               data-placement="top-right">
              <i class="fa fa-share-alt"></i>
            </a>

            <div class="left" ng-show="lookAt != 'SolarSystem'">
              <p localize="N"></p>
              <div class="sphere" id="skyball">
                <div class="v-ellipse"></div>
                <div class="h-ellipse"></div>
                <div class="x-axis"></div>
                <div class="y-axis"></div>
              </div>
              <p><span localize="RA"></span>: {{formatted.RA}}</p>
              <p><span localize="Dec"></span>: {{formatted.Dec}}</p>
            </div>

            <div class="left" ng-show="lookAt == 'SolarSystem'">
              <div class="control">
                <label localize="Planet Size"></label>
                <div class="planetary-scale">
                  <a class="btn"></a>
                </div>
              </div>

              <label class="pull-right" localize="Large"></label>
              <label class="pull-left" localize="Actual"></label>

              <div class="location">
                <p><span localize="Lat"></span>: {{formatted.Lat}}</p>
                <p><span localize="Lng"></span>: {{formatted.Lng}}</p>
              </div>
            </div>

            <div class="right">
              <p style="position: relative;top:3px;">
                {{formatted.Constellation}}
                <span class="pull-right">{{formatted.Zoom}}</span>
              </p>
              <div class="constellation-viewport" ng-click="gotoConstellation(singleton.constellation)">
                <img ng-src="{{constellations.constellationCentroids[singleton.constellation].get_thumbnailUrl()}}" />
              </div>
              <div class="bar"></div>
            </div>
          </div>

          <div class="controls" ng-style="{ width: bottomControlsWidth() + 'px'}">
            <div class="layer-manager-toggle iblock" id="btnToggleLayerMgr">
              <a href="javascript:void(0)"
                 class="layer-manager-icon"
                 localize="Show/Hide Layer Manager"
                 localize-only="title"
                 ng-click="toggleLayerManager()">&nbsp;</a>
            </div>

            <!-- the "$parent"s below are needed to wire these elements up to
                 the MainController scope, because the ng-if="desktop" adds
                 another level of scope that we would otherwise be modifying.
                 -->

            <div class="control">
              <label localize="Look At"></label>
              <select id="lstLookAt"
                      ng-init="$parent.lookAt = 'Sky'"
                      ng-model="$parent.lookAt"
                      ng-change="lookAtDropdownChanged()"
                      ng-options="type for type in lookTypes"></select>
            </div>

            <div class="control">
              <label localize="Imagery"></label>
              <select id="lstImagery"
                      ng-init="$parent.backgroundImagery.name = 'Digitized Sky Survey (Color)'"
                      ng-model="$parent.backgroundImagery"
                      ng-change="setSurveyBg()"
                      ng-options="s.name for s in surveys">
                <option value="?">&nbsp;</option>
              </select>
            </div>

            <div ng-show="showCrossfader()" class="control" style="padding-right:10px">
              <label localize="Image Crossfade"></label>
              <div class="cross-fader">
                <a class="btn">&nbsp;</a>
              </div>
            </div>
          </div>

          <!-- Nearby objects thumbnail row inside the lower Context panel -->

          <div class="thumbnails nearby-objects rel"
               ng-if="!compressed"
               data-ng-controller="ContextPanelController"
               ng-style="{width: bottomControlsWidth()}">
            <div class="rel"
                 style="display: inline-block;vertical-align:top;"
                 ng-repeat="item in collectionPage"
                 ng-if="lookAt != 'Planet' && lookAt != 'Panorama'">
              <ng-include src="'<%= webclient_static_assets_url_prefix %>views/thumbnail.html?v=<%= shortSHA %>'"></ng-include>
            </div>

            <label class="wwt-pager">
              <a class="btn"
                 ng-if="(lookAt == 'Planet' || lookAt == 'Panorama' || lookAt == 'Earth' ) && !trackingObj"
                 data-bs-popover="popover"
                 tabindex="0"
                 style="position:absolute; top:0;right:-204px"
                 localize="Share this view"
                 localize-only="title"
                 data-content-template="<%= webclient_static_assets_url_prefix %>views/popovers/shareplace.html?v=<%= shortSHA %>"
                 data-container="body"
                 data-placement="top-right">
                <i class="fa fa-share-alt"></i>
              </a>

              <div class="iblock tracking rel" ng-if="showTrackingString()" style="vertical-align: top;">
                <div localize="Tracking"></div>
                <div title="{{trackingObj.get_name()}}">{{trackingObj.get_name()}}</div>
                <a class="btn" data-bs-popover="popover" tabindex="0"
                   style="position:absolute; top:0;left:-40px"
                   localize="Share this place"
                   localize-only="title"
                   data-content-template="<%= webclient_static_assets_url_prefix %>views/popovers/shareplace.html?v=<%= shortSHA %>"
                   data-container="body"
                   data-placement="top-right">
                  <i class="fa fa-share-alt"></i>
                </a>
              </div>

              <div class="iblock rel vtop" ng-style="{right:contextPagerRight() + 'px'}" ng-if="lookAt != 'Planet' && lookAt != 'Panorama' && pageCount > 1">
                <a href="javascript:void(0)" data-ng-disabled="currentPage == 0" ng-click="goBack()">
                  <i class="fa fa-play reverse"></i>
                </a>
                {{(currentPage+1)}} <span localize="of"></span> {{pageCount}}
                <a href="javascript:void(0)" ng-disabled="currentPage == pageCount - 1" ng-click="goFwd()">
                  <i class="fa fa-play"></i>
                </a>
              </div>
            </label>
          </div>
        </div>

        <!-- More modals -->

        <ng-include src="'<%= webclient_static_assets_url_prefix %>views/modals/intro.html?v=<%= shortSHA %>'"></ng-include>

        <div class="modal"
             id="loadingModal"
             tabindex="-1"
             role="dialog"
             aria-labelledby="loadingModalLabel"
             aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-body">
                <img src='<%= webclient_static_assets_url_prefix %>images/wwtlogo.png?v=<%= shortSHA %>'
                     style="width:19%;height:19%;position:relative;left:-3px;margin-right:12px;"
                     class="pull-left"
                     localize="WorldWide Telescope Logo"
                     localize-only="alt" />
                <h1 style="position:relative;top:-2px">
                  World<span style="color:#6ba9e6">Wide Telescope</span>
                </h1>

                <p>
                  <i class="fa fa-spin fa-spinner"></i>
                  <span localize="Content Loading. Please Wait..."></span>
                </p>
              </div>
            </div>
          </div>
        </div>

        <div class="modal"
             id="folderLoadingModal"
             tabindex="-1"
             role="dialog"
             aria-labelledby="folderLoadingLabel"
             aria-hidden="true"
             data-backdrop="static"
             data-keyboard="false" >
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-body">
                <h4>
                  <i class="fa fa-spin fa-spinner"></i>
                  <span localize="Loading folder contents. Please Wait..."></span>
                </h4>
              </div>
            </div>
          </div>
        </div>

        <a href="javascript:void(0)" data-toggle="modal" data-target="#loadingModal" id="loadingModalLink">&nbsp;</a>

        <ng-include src="'<%= webclient_static_assets_url_prefix %>views/modals/open-item.html?v=<%= shortSHA %>'"></ng-include>

        <div ng-intro-autostart="false"
             ng-intro-onbeforechange="beforeChange"
             ng-intro-onafterchange="afterChange"
             ng-intro-onexit="exit"
             ng-intro-oncomplete="completed"
             ng-intro-method="startIntro"
             ng-intro-options="options"
             ng-controller="IntroController"
             class="hide">
          <a ng-click="startIntro()" id="introStartButton"></a>
        </div>
      </div> <!-- end desktop (non-mobile) block -->
    </div> <!-- end MainController wrapper div -->
  </body>
</html>
